.filter {
  &_view {
    .filter_title {
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
      position: relative;
      z-index: 1001;
      background-color: #fff;
      .title_item {
        font-size: 16px;
        color: #333;
        position: relative;
        &::after {
          content: "";
          width: 0;
          height: 0;
          border: 4px solid transparent;
          border-top-color: currentColor;
          position: absolute;
          top: 8px;
          left: 37px;
        }
        &.active {
          color: #21b97a;
        }
      }
    }
    .picker_content {
      position: relative;
      z-index: 1001;
      background-color: #fff;
      .filter_picker {
        .picker_tools {
          display: flex;
          align-items: center;
          background-color: #fff;
          border-top: 1px solid #ccc;
          font-size: 18px;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            &:nth-child(1) {
              flex: 1;
            }
            &:nth-child(2) {
              flex: 2;
              background-color: #21b97a;
              color: #fff;
            }
          }
        }
      }
      //   最后一个筛选组件的父容器
      .filter_more {
        position: fixed;
        width: 80vw;
        height: 100vh;
        top: 0;
        right: 0;
        background-color: #fff;
        z-index: 10000;
        &_content {
          height: calc(100vh - 50px);
          padding: 15px;
          padding-top: 0;
          overflow: auto;
          .more_group {
            padding-bottom: 15px;
            border-bottom: 1px solid #ccc;
            &_title {
              margin: 20px 0;
              color: #333;
              font-size: 14px;
            }
            &_list {
              display: flex;
              padding-bottom: 15px;
              flex-wrap: wrap;
              .more_item {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #ccc;
                margin-right: 15px;
                margin-bottom: 15px;
                width: 70px;
                height: 32px;
                font-size: 12px;
              }
              .active {
                background-color: #defaef;
                border-color: #21b97a;
                color: #21b97a;
              }
            }
            &:last-child {
              border-bottom: none;
            }
          }
        }
        &_tools {
          display: flex;
          border-top: 1px solid #ccc;
          span {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            font-size: 18px;
            &:nth-child(1) {
              flex: 1;
            }
            &:nth-child(2) {
              flex: 2;
              background-color: #21b97a;
              color: #fff;
            }
          }
        }
      }
    }
    // 遮罩层
    .mask {
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
    }
    .z100 {
      z-index: 100 !important;
    }
  }
}
